<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>论坛</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>

<body>
    <div class="bbs">
        <header>
            <span onclick="add()">我要发帖</span>
        </header>
        <section id="main">
            <ul id="mainlist">

            </ul>
        </section>
        <div class="post">
            <input id="title" class="title" placeholder="请输入标题（1-50个字符）">所属版块：
            <select id="channel">
                <option>请选择版块</option>
                <option>Python交流专区</option>
                <option>Java交流专区</option>
                <option>Web交流专区</option>
            </select>
            <textarea id="content" class="content"></textarea>
            <input class="btn" value="发布" onclick="create()">
            <input class="btn" value="关闭" onclick="closing()">
        </div>
    </div>
</body>
<script>
    const postelement = document.getElementsByClassName("post")[0];
    // 点击“我要发贴”
    function add() {
        postelement.style.display = 'block'
    }
    // 点击“关闭”
    function closing() {
        postelement.style.display = 'none'
        document.getElementById("title").value = ''
        document.getElementById("content").value = ''
        document.getElementById("channel").value = '请选择版块'
    }
    // 点击“发布”
    function create() {
        const title = document.getElementById("title").value
        const content = document.getElementById("content").value
        const channel = document.getElementById("channel").value
        document.getElementById("mainlist").innerHTML +=
            `<li>
                 <h1>${title}</h1>
                 <p>
                    <span>版块：${channel}  内容:${content}</span>
                    <input type="button" name="del" class="delbtn" value="删除" onclick="del(this)">
                 </p>
             </li>`

        closing()
    }
    // 点击“删除”
    function del(obj) {
        document.getElementById("mainlist").removeChild(obj.parentNode.parentNode)
    }
</script>

</html>